<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        tr,
        th {
            padding: 5px 50px;
            text-align: center;
        }

        tbody tr {
            background-color: #fff4e8;
        }

        img {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <h1><span style="color: rgb(224, 37, 37);font-weight: 900;">全部商品</span></h1>
    <table>
        <thead>
            <tr style="background-color: #f3f3f3;">
                <th><input type="checkbox" class="all">全选</th>
                <th>商品</th>
                <th>单价</th>
                <th>数量</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

    <div class="bottom">
        总价:￥<span class="money" style="color: red;font-size: 20px;font-weight: 700;">0</span><br><br>
        <button onclick="zong()">去结算</button>
    </div>

    <script>
        var car = JSON.parse(localStorage.getItem('goods'))
        var tbody = document.querySelector('tbody')
        function apply() {
            tbody.innerHTML = ''
            car.forEach(item => {
                tbody.innerHTML += `
            <tr>
                <td><input type="checkbox" ${item.is ? 'checked' : ''} onclick='dan(${item.id})'></td>
                <td><img src="${item.img}"></td>
                <td>￥${item.price}</td>
                <td>
                    <button onclick="jian(${item.id})">-</button>
                    <span>${item.num}</span>
                    <button onclick="jia(${item.id})">+</button>
                </td>
                <td><button onclick="del(${item.id})">删除</button></td>
            </tr>`
            })
        }
        apply()


        //全选反选
        document.querySelector('.all').addEventListener('click', () => {
            var inps = document.querySelectorAll('tbody input')
            inps.forEach(item => {
                item.checked = document.querySelector('.all').checked
            })
        })

        // 数量加减
        function jia(id) {
            var a = car.find(item => item.id == id)
            event.target.previousElementSibling.innerHTML = a.num++ + 1
        }

        function jian(id) {
            var a = car.find(item => item.id == id)
            if (a.num != 0) {
                event.target.nextElementSibling.innerHTML = a.num-- - 1
            }
        }

        //删除
        function del(id) {
            var a = car.findIndex(item => item.id == id)
            car.splice(a, 1)
            apply()
        }

        // 计算总价
        var all = document.querySelector('.all')
        all.addEventListener('click', () => {
            var inps = document.querySelectorAll('tbody input')
            inps.forEach(item => {
                item.checked = all.checked
                var zong = 0
                car.find(item => {
                    if (all.checked) {
                        zong += item.price * item.num
                    }
                    document.querySelector('.money').innerHTML = zong
                })
            })
        })

        // 单个
        function dan(id) {
            var a = car.findIndex(item => item.id == id)
            car[a].is = event.target.checked
            var zong = 0
            car.find(item => {
                if (item.is) {
                    zong += item.price * item.num
                }
                document.querySelector('.money').innerHTML = zong
            })
        }

        function zong() {
            var good = []
            car.forEach(item => {
                if (item.is) {
                    good.push(item)
                }
            })
            localStorage.setItem('goods', JSON.stringify(good))
            location.assign('./结算.html')
        }
    </script>
</body>

</html>